import { Component } from 'react';
import ActivityList from '../../components/content/activity/ActivityList';
import './Activity.scss';
class Activity extends Component {
  state = {
    // 城市下拉菜单数据
    cityList: ['北京', '上海', '深圳', '成都', '重庆'],
    // 活动类型
    activityType: ['线上活动', '推广类', '线下活动', '品牌介绍'],
    // 赞助商
    sponsorList: ['淘宝', '京东', '拼多多', '天猫'],
    // 表单信息
    formData: {
      actyName: '前端前景技术发展交流', // 活动名称
      actyCity: '', // 城市
      startTime: '', //开始时间
      endTime: '', // 结束时间
      phone: '', // 电话
      allowPhoto: 1, // 是否允许电话沟通
      status: '', // 职业
      actyType: '', // 活动类型
      actySponsor: '淘宝', // 赞助商
      describe: '', // 描述
    },
    msgData: {}
  };
  // 公用函数
  onPublic(key, value) {
    if (key === 'actyType') { // 如果是活动类型，需要特殊处理
     let type = this.state.formData.actyType // 获取actyType目前的数据
     if (type.includes(value)) { // 如果actyType中包含 value，说明选中又取消了，需要提出来
        let T = type.split('|').filter(item => item !== value).join('|') // 将actyType通过split切割成数组，并将其中跟value不相等的提出来（去掉value），再转回字符串
        Object.defineProperty(this.state.formData, key, { value:T });
     }else {
      // 如果没有，直接拼接，修改actyType
        let T = (type += '|' + value)
        Object.defineProperty(this.state.formData, key, { value:T });
     }
    } else { // 除了活动类型其他的直接修改
        // 通过defineProperty修改formdata中指定属性及值
        Object.defineProperty(this.state.formData, key, { value });
    }
    // 更新页面
    this.setState({
      formData: this.state.formData
    })
  }
    // 重置
    onResets (e) {
      e.preventDefault(); // 阻止默认行为
      this.setState({
        formData : {
          actyName: '前端前景技术发展交流', 
          actyCity: '', 
          startTime: '', 
          endTime: '', 
          phone: '', 
          allowPhoto: 1, 
          status: '', 
          actyType: '', 
          actySponsor: '淘宝', 
          describe: '', 
        },
      })
    }
  // 提交
  submit(e) {
    e.preventDefault(); // 阻止默认行为
    const {
      actyCity,
      phone,
      startTime,
      endTime,
      status,
      actySponsor,
      actyType
    } = this.state.formData;
    if (!actyCity || !phone || !startTime || !endTime || !status || !actySponsor ||!actyType) return alert('请完善信息')
    alert('提交成功')
    this.setState({
      msgData: this.state.formData
    })
    this.onResets(e)
  }
  render() {
    // 每次调用render将state中formdata结构
    const {
      actyCity,
      actyName,
      phone,
      describe,
      allowPhoto,
      startTime,
      endTime,
      status,
      actySponsor,
      actyType
    } = this.state.formData;
    return (
      <div className="activity-box">
        <ActivityList {...this.state.msgData} />
        <form>
          {/* 活动名称 */}
          <div>
            <label><span className='isrequired'>*</span> 活动名称</label>
            <b>{actyName}</b>
          </div>
          {/* 城市 */}
          <div>
            <label><span className='isrequired'>*</span>城市</label>
            <select className="activity-city" value={actyCity} onChange={(e) => this.onPublic('actyCity', e.target.value)}>
              <option value="">请选择城市</option>
              {this.state.cityList.map((item, index) => (
                <option key={index} value={item}> {item} </option>
              ))}
            </select>
          </div>
          {/* 日期 */}
          <div>
            <label><span className='isrequired'>*</span>日期</label>
            <section className="activity-date">
              <input type="date" value={startTime} onChange={(e) => this.onPublic('startTime', e.target.value)}/>{' '}-
              <input type="date" value={endTime} onChange={(e) => this.onPublic('endTime', e.target.value)}/>
            </section>
          </div>
          {/* 电话 */}
          <div>
            <label><span className='isrequired'>*</span>报名电话</label>
            <input type="text" placeholder="手机号" value={phone} onChange={(e) => this.onPublic('phone', e.target.value)}/>
          </div>
          {/* 允许电话沟通 */}
          <div>
            <label><span className='isrequired'>*</span>允许电话沟通</label>
            <section onClick={() => this.onPublic('allowPhoto', allowPhoto ? 0:1)} className={allowPhoto ? 'switch open' : 'switch close'}>
              <span></span>
            </section>
          </div>
          {/* 职业 */}
          <div>
            <label><span className='isrequired'>*</span>目前职业</label>
            <input type="text" placeholder="职业" value={status} onChange={(e) => this.onPublic('status', e.target.value)} />
          </div>
          {/* 活动类型 */}
          <div className="type">
            <label><span className='isrequired'>*</span>活动类型</label>
            <section className="activity-type">
              {this.state.activityType.map((item, index) => (
                <label key={index}><input value={item} checked={actyType.includes(item)} onChange={(e) => this.onPublic('actyType',e.target.value)} type="checkbox" /><span>{item}</span></label>))}
            </section>
          </div>
          {/* 赞助商 */}
          <div>
            <label><span className='isrequired'>*</span>活动赞助商</label>
            <section className="activity-sponsor">
              {this.state.sponsorList.map((item, key) => {
                return (
                  <label key={key}>
                    <input type="radio" value={item} checked={actySponsor===item} onChange={(e) => this.onPublic('actySponsor', e.target.value)} name="sponsor"/>
                    <span>{item}</span>
                  </label>);})}
            </section>
          </div>
          {/* 描述信息 */}
          <div className="describe">
            <label><span className='isrequired'>*</span>描述</label>
            <textarea className="activity-dcbe" placeholder="请输入100字以内描述" maxLength="100" value={describe}
               onChange={(e) => this.onPublic('describe', e.target.value)} cols="20" rows="4"></textarea>
          </div>

          {/* 提交 */}
          <div className='form-submit'>
            <button className='submit' onClick={(e) => this.submit(e)}>提交</button>
            <button className='reset' onClick={(e) => this.onResets(e)}>重置</button>
          </div>
        </form>
      </div>
    );
  }
}

export default Activity;
